.<template>
  <ul>
    <li v-for="m in messages" :key="m.id">
      <router-link :to="{
        name:'xiangqing',
        query:{
          id:m.id,
          title:m.title
        }
      }">
        {{ m.title }}
      </router-link>
      <button @click="pushShow(m)">push查看</button>
      <button @click="pushrePlace(m)">replace查看</button>
    </li>
    <hr>
    <router-view></router-view>
  </ul>
</template>

<script>
export default {
  naem:'MyMessage',
  data(){
    return{
      messages:[
        {id:'001',title:'消息编号001'},
        {id:'002',title:'消息编号002'},
        {id:'003',title:'消息编号003'}
      ]
    }
  },
  methods:{
    pushShow(m){
      this.$router.push({
        name:'xiangqing',
        query:{
          id:m.id,
          title:m.title
        }
      })
    },
    pushrePlace(m){
      this.$router.replace({
        name:'xiangqing',
        query:{
          id:m.id,
          title:m.title
        }
      })
    },
  }
}
</script>

<style>

</style>